@CHARSET "UTF-8";

#titre_playlist 
{
    color: rgb(244, 250, 252);
    position: absolute;	
    left: 270px;
    top: 40px;
    z-index: 300;
    font: 12px Nom_playlist,Arial, sans-serif;
    font-size: 42px;
    padding-left: 15px;
    padding-right: 15px;
}

.auteur_playlist
{
    color: white;
    position: absolute;	
    left: 290px;
    top: 100px;
    font: 12px Nom_playlist,Arial, sans-serif;
    font-size: 16px;
    padding-left: 8px;
    padding-right: 8px;
}


#experiment.focus {
  -webkit-transform: perspective(700) ;
      -webkit-perspective: 700;
    -webkit-transition: -webkit-transform 0.4s;

  -webkit-perspective-origin: 39% 51%;
    position: relative;
}


#experiment.transit {
  -webkit-transform: perspective(9000) ;
      -webkit-perspective: 9000;

  -webkit-perspective-origin: 57% 60%;
    position: relative;
}
#experiment.finishanimate {
  

  -webkit-perspective-origin: 57% 60%;
    position: relative;
    -webkit-transform:translate3d(0px,77px,0px);
}

#experiment:focus.translate{
    -webkit-transform:translate3d(0px,77px,0px);
}

#experiment.translate {
        -webkit-transition: -webkit-transform 1s;
      
}


.playlist {
    background-color: #333;
    padding: 5px;
    position: absolute;
    top: 130px;
    left: 80px;
    font-size: 20px;
    color: white;
}
#cube img {
    width:100%;
    height: 100%;
}

.testfocus {
    position: relative;
    left: 90px;
    margin: 100px auto;
    width: 300px;
    height: 300px;
    -webkit-transition: -webkit-transform 1s;
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style    : preserve-3d;
    -o-transform-style      : preserve-3d;
    -ms-transform-style     : preserve-3d;
    transform-style         : preserve-3d;
    z-index: 800;
    top: 40px;
    
}

#cube {
    position: relative;
    left: 35px;
    margin: 100px auto;
    width: 300px;
    height: 300px;
    -webkit-transition: -webkit-transform 1s;
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style    : preserve-3d;
    -o-transform-style      : preserve-3d;
    -ms-transform-style     : preserve-3d;
    transform-style         : preserve-3d;
    z-index: 800;
    top: 40px;
    
}



.animate {
    -webkit-animation : spinningH 6s infinite linear;
    -moz-animation    : spinningH 6s infinite linear;
    -o-animation      : spinningH 6s infinite linear;
    -ms-animation     : spinningH 6s infinite linear;
    animation         : spinningH 6s infinite linear;
}


.face {
    position: absolute;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-all 0.5s ease-in-out;
}
/*.face:active {
    position: absolute;
    height: -50px;
    width: 50px;
   
}*/

#cube .one  {
    -webkit-transform: rotateX(90deg) translateZ(150px);
    -moz-transform    : rotateY(90deg) translateZ(150px);
    z-index: 800;
}

#cube .two {
    -webkit-transform: translateZ(150px);
     -moz-transform: translateZ(150px);
    z-index: 800;
}

#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(150px);
     -moz-transform: rotateY(90deg) translateZ(150px);
    z-index: 800;
}

#cube .four {
    -webkit-transform: rotateY(180deg) translateZ(150px);
    -moz-transform: rotateY(180deg) translateZ(150px);
    
    z-index: 800;
}

#cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    z-index: 800;
}

#cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(150px) rotate(180deg);
    -moz-transform: rotateX(-90deg) translateZ(150px) rotate(180deg);
    z-index: 800;
}



@-moz-keyframes spinningH {
    from {
    -moz-transform: rotateX(0deg) rotateY(0deg);
}
to{
    -moz-transform: rotateX(360deg) rotateY(360deg);
}
}

@-webkit-keyframes spinningH {
    from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
}
to{
    -webkit-transform: rotateX(360deg) rotateY(360deg);
}
}

@-o-keyframes spinningH {
    from {
    -o-transform: rotateX(0deg) rotateY(0deg);
}
to{
    -o-transform: rotateX(360deg) rotateY(360deg);
}
}

@-ms-keyframes spinningH {
    from {
    -ms-transform: rotateX(0deg) rotateY(0deg);
}
to{
    -ms-transform: rotateX(360deg) rotateY(360deg);
}
}

@keyframes spinningH {
    from {
    transform: rotateX(0deg) rotateY(0deg);
}
to{
    transform: rotateX(360deg) rotateY(360deg);
}
}

#experiment {
    -webkit-transition: -webkit-transform 1s;
border: none;
    width: 29%;
    position: relative;
    left: 43%;
    height: 3%;
}

#anim
{
    border:none;
}

#main
{
    border:none;
}

* :focus { outline: 0; }
.focus {
    -webkit-transition: -webkit-transform 0s;

}
/*#experiment:focus {
 -webkit-transform: translate(0px,50px);
}*/
 .testfocus{
    -webkit-transition: -webkit-transform 1s;
}

.headbarre2
{
      transition-delay: 5s;

    
    -webkit-transition: -webkit-transform 1.5s;
 
}
.headbarre2
{
    -webkit-transform: translateY(167px);
 
}

#anim.fadeIn {
    opacity: 1;/* l'opacite que vous voulez au depart */
    border: none;/* enlever les border d'une image en lien */
    -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* Hack IE8 */
    filter: alpha(opacity = 25); /* Hack IE 5-7 */
    -webkit-transition: opacity 1s;/* transition pour Chrome et Safari */
    -moz-transition: opacity 1s ;/* transition pour Firefox */
    -o-transition: opacity 1s;/* transition pour Opéra */
    transition: opacity 1s; /* on écrit cette ligne à la fin de façon à ce que ce soit elle qui soit prise en compte lorsque l'attribut transition sera pris en compte par tous les navigateurs */
 
}

.fadeOut
{ -webkit-transition: opacity 0.1s ;/* transition pour Chrome et Safari */
    -moz-transition: opacity 0.1s;/* transition pour Firefox */
    -o-transition: opacity 0.1s;/* transition pour Opéra */
    transition: opacity 0.1s ; /* on écrit cette ligne à la fin de façon à ce que ce soit elle qui soit prise en compte lorsque l'attribut transition sera pris en compte par tous les navigateurs */
 }
#anim:focus.fadeOut {
    opacity: 0; /* opacite au survol */
    -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* Hack IE 8 */
    filter: alpha(opacity = 90); /* Hack IE 5-7 */
}

#experiment:focus.focus
{
       -webkit-transition: -webkit-transform 0.6s;
-webkit-transform: scale(0.8,0.8);
}
#experiment.finalposition
{
 position:relative;
 top: 77px;
}



